<template>
	<view class="con">
		<view class="top flex">
			<view class="top1">已结算总额(元)</view>
			<view class="top2">{{userInfo.money_withdraw}}</view>
		</view>
		<view class="zhongj flex flex_between">
			<view class="uni-list-cell-db flex">
				<picker mode="date" fields="month" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{date}}</view>
				</picker>
				<image class="dataimg" mode="widthFix" src="/static/mine/img22.png"></image>
			</view>
			<view class="topzc_v2 flex">
				<image class="topzc_v2_img" mode="widthFix" :src="userInfo.lv_ico"></image>
				<view class="topzc_v2_v">￥{{money_total}}</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="lieb">
			<view class="liebli flex flex_between" v-for="(item,index) in withdrawlist" :key="index">
				<view class="liebliz">{{item.time}}</view>
        <view class="flex">
          <view class="liebliy">￥{{item.money}}</view>
          <view class="liebliy" v-if="item.state==='0'||item.state===0">待处理</view>
          <view class="liebliy" v-if="item.state==='1'||item.state===1">已结算</view>
          <view class="liebliy" v-if="item.state==='2'||item.state===2">审核失败</view>
        </view>
			</view>
		</view>
	</view>

</template>

<script>
  import {
    withdrawWithdrawlist //提现明细
  } from '@/request/api.js'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
        openid:uni.getStorageSync('openid'),
        userInfo: uni.getStorageSync('userInfo'), //授权后的信息
				date: currentDate,
        money_total:'',//当月提现总额
        withdrawlist:[], //提现记录
        page:1,//页码
        total:0,//总共的数量
        pagesizes:15//每页数量
			}
		},
    onLoad() {
      // this.withdrawWithdrawlistFun() //获取提现明细
    },
    onShow(){
      this.withdrawWithdrawlistFun() //获取提现明细
    },
    onReachBottom() {
      let totolPage =Math.ceil(this.total / this.pagesizes) 
      console.log('总共多少页')
      console.log(totolPage)
      if(this.page<=totolPage){
        this.loadMore(); // 当上拉时加载更多数据
      }
    },
		methods:{
      // 加载更多
      loadMore(){
        this.page = this.page+1
        this.withdrawWithdrawlistFun()
      },
      // 获取提现明细
      withdrawWithdrawlistFun(){
        let param = {
          page:this.page,
          openid:this.openid,
          date:this.date
        }
        withdrawWithdrawlist(param).then(res=>{
          console.log('获取提现明细')
          console.log(res)
          if(res.error_code===0){
            this.money_total = res.data.money_total
            this.total = Number(res.data.total);
            this.pagesizes = Number(res.data.pagesizes);
            let listRe = res.data.arrList
            if(listRe.length>0){
              this.withdrawlist = this.withdrawlist.concat(listRe);
            }
            // this.withdrawlist = res.data.arrList
          }
        })
      },
      
			changData(index) {
        
				this.selectIndex = index
			},
      // 选择年月日
			// getDate(type) {
			// 	const date = new Date();
			// 	let year = date.getFullYear();
			// 	let month = date.getMonth() + 1;
			// 	let day = date.getDate();
			
			// 	if (type === 'start') {
			// 		year = year - 60;
			// 	} else if (type === 'end') {
			// 		year = year + 2;
			// 	}
			// 	month = month > 9 ? month : '0' + month;
			// 	day = day > 9 ? day : '0' + day;
			// 	return `${year}-${month}-${day}`;
			// },
      // 选择年月
      getDate(type) {
      	const date = new Date();
      	let year = date.getFullYear();
      	let month = date.getMonth() + 1;
      	let day = date.getDate();
      
      	if (type === 'start') {
      		year = year - 60;
      	} else if (type === 'end') {
      		year = year + 2;
      	}
      	month = month > 9 ? month : '0' + month;
      	day = day > 9 ? day : '0' + day;
      	return `${year}-${month}`;
      },
			bindDateChange: function(e) {
        console.log('改变日期')
        console.log(e)
				this.date = e.detail.value
        this.page = 1
        this.withdrawlist = []
        this.withdrawWithdrawlistFun()
			},
		},
    computed: {
    	startDate() {
    		return this.getDate('start');
    	},
    	endDate() {
    		return this.getDate('end');
    	}
    }
	}
</script>

<style scoped lang="scss">
	.top {
		width: 100%;
		height: 260rpx;
		line-height: 40rpx;
		border-radius: 20rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(16, 16, 16, 1);
		font-size: 28rpx;
		text-align: center;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.top1 {
			color: rgba(16, 16, 16, 1);
			font-size: 28rpx;
			line-height: 40rpx;
		}

		.top2 {
			color: rgba(16, 16, 16, 1);
			font-size: 48rpx;
			line-height: 60rpx;
			font-family: 'AvantGardeFont';
		}
	}
	.uni-list-cell-db {
		color: rgba(16, 16, 16, 1);
		font-size: 28rpx;
	
		.dataimg {
			width: 28rpx;
			height: auto;
			margin-left: 10rpx;
		}
	}
	.topzc_v2{
		border-radius: 40rpx;
		background-color: rgba(249,191,65,1);
		.topzc_v2_img{
			width: 104rpx;
			height: 40rpx;
			border-radius: 40rpx 0px 0px 40rpx;
		}
		.topzc_v2_v{
			padding: 0 14rpx;
			padding-right: 20rpx;
			height: 40rpx;
			color: rgba(16,16,16,1);
			font-size: 28rpx;
			line-height: 40rpx;
			border-radius: 0px 40px 40px 0px;
			background-color: rgba(249,191,65,1);
			font-family: 'AvantGardeFont';
		}
	}
	.zhongj{
		padding: 40rpx 0;
	}
	.lieb{
		width: 100%;
		height: auto;
		.liebli{
			width: 100%;
			height: auto;
			padding: 30rpx;
			box-sizing: border-box;
			color: rgba(16,16,16,1);
			font-size: 28rpx;
			font-family: 'AvantGardeFont';
			border-radius: 20rpx;
			background: #fff;
			margin-bottom: 20rpx;
		}
	}
  .liebliy{
    margin-left: 30rpx;
  }
</style>